<script setup>
import { ref } from 'vue';

// 标签页激活状态
const activeTab = ref('name1');

const Value = ref('')
const Options = ref([{
    value: '111111',
    label: '111111'
},
{
    value: '111111',
    label: '111111'
}
])
// 筛选条件
const filterForm = ref({
    date: '2025年10月', // 日期筛选
    serviceType: '全部服务类型', // 服务类型筛选
    isRealTime: true, // 是否实时更新
    hideNoData: true, // 隐藏无数据员工
});

// 表格数据
const tableData = ref([
    {
        department: '部门A',
        employee: '张三',
        应收户数: 10,
        已收户数: 8,
        未收户数: 2,
        按户回款率: '80.00%',
        应收金额: 50000,
        已收金额: 40000,
        未收金额: 10000,
        金额回款率: '80.00%',
    },
    // 更多数据...
]);

// 汇总指标数据
const summaryData = ref({
    按户回款率: '0.00%',
    应收: '0户',
    已收: '0户',
    金额回款率: '0.00%',
    应收金额: '0.00元',
    已收金额: '0.00元',
});
</script>

<template>
    <div class="payment">

        <el-tabs v-model="activeTab" class="class-1">

            <el-tab-pane name="name1" label="代账费回款情况">
                <!-- 筛选条件 -->
                <div class="filter-container">
                    <el-select v-model="filterForm.date" placeholder="请选择日期" class="class-2">
                        <el-option label="2025年10月" value="2025年10月" />
                        <!-- 更多选项... -->
                    </el-select>

                    <el-select v-model="filterForm.serviceType" placeholder="全部服务类型" class="class-3">
                        <el-option label="全部服务类型" value="全部服务类型" />
                        <!-- 更多选项... -->
                    </el-select>

                    <el-select v-model="filterForm.isRealTime" placeholder="实时更新的数据" class="class-4">
                        <el-option label="实时更新" value="true" />
                        <el-option label="非实时" value="false" />
                    </el-select>


                    <el-checkbox v-model="filterForm.hideNoData" class="class-5">隐藏无数据员工</el-checkbox>

                </div>

                <!-- 汇总指标 -->
                <div class="summary-container">
                    <div class="summary-item">
                        <p>{{ summaryData.按户回款率 }}</p>
                        <p>按户回款率</p>
                    </div>
                    <div class="summary-item">
                        <p>{{ summaryData.应收 }}</p>
                        <p>应收</p>
                    </div>
                    <div class="summary-item">
                        <p>{{ summaryData.已收 }}</p>
                        <p>已收</p>
                    </div>
                    <div class="summary-item">
                        <p>{{ summaryData.金额回款率 }}</p>
                        <p>金额回款率</p>
                    </div>
                    <div class="summary-item">
                        <p>{{ summaryData.应收金额 }}</p>
                        <p>应收</p>
                    </div>
                    <div class="summary-item">
                        <p>{{ summaryData.已收金额 }}</p>
                        <p>已收</p>
                    </div>
                </div>
                <div class="class-6">
                    <el-select v-model="Value" placeholder="服务顾问" class="class-7">
                        <el-option v-for="item in Options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <div class="export-button">
                        <el-button type="primary">导出</el-button>
                    </div>
                </div>

                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="department" label="部门/员工" width="120" />
                    <el-table-column prop="应收户数" label="应收户数" width="100" />
                    <el-table-column prop="已收户数" label="已收户数" width="100" />
                    <el-table-column prop="未收户数" label="未收户数" width="100" />
                    <el-table-column prop="按户回款率" label="按户回款率" width="120" />
                    <el-table-column prop="应收金额" label="应收金额" width="120" />
                    <el-table-column prop="已收金额" label="已收金额" width="120" />
                    <el-table-column prop="未收金额" label="未收金额" width="120" />
                    <el-table-column prop="金额回款率" label="金额回款率" width="120" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style lang="less" scoped>
.payment {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(239, 239, 239);
}

.filter-container {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: white;
    border-bottom: 1px solid #ebeef5;
}

.summary-container {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    background-color: white;
    border-bottom: 1px solid #ebeef5;
    justify-content: space-around;

    .summary-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 40px;

        p:first-child {
            font-size: 20px;
            font-weight: bold;
            color: #ff6b00;
            margin-bottom: 5px;
        }

        p:last-child {
            color: #666;
        }
    }
}

.table-container {
    padding: 10px;
    background-color: white;
}

.export-button {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    background-color: white;
    border-top: 1px solid #ebeef5;
}

.class-1 {
    margin: 10px;
    background-color: white
}

.class-2 {
    width: 150px;
    margin-right: 10px
}

.class-3 {
    width: 150px;
    margin-right: 10px
}

.class-4 {
    width: 150px;
    margin-right: 10px
}

.class-5 {
    margin-left: 10px
}

.class-6 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.class-7 {
    width: 240px;
    margin-left: 20px;
    margin-top: 10px
}
</style>